<template>
  <div class="my-stocks">
    <div class="headline">
      <span></span>我的个股持仓
    </div>

    <div class="list">
      <div class="entry clearfix" v-for="(item,index) in stockList">
        <div class="one link" @click.stop.prevent = "toStock(item)">
          <div class="stock">
            <i class="iconfont icon-gu"></i>
            <span class="name">{{item.stockName}}</span>
            <span class="code" v-if="item.exchangeType== 1">SH{{item.stockCode}}</span>
            <span class="code" v-else>SZ{{item.stockCode}}</span>
          </div>

          <div class="digit">
            <div class="one">
              <div class="value">{{item.costPrice}}</div>
              <div class="key">成本价</div>
            </div>
            <div class="two">
              <div class="value">{{item.marketPrice}}</div>
              <div class="key">现价</div>
            </div>
            <div class="three">
              <div class="value">{{item.quantity}}</div>
              <div class="key">数量</div>
            </div>
            <div class="four">
              <div class="value" :class="item.income < 0 ? 'negative': 'positive'">{{item.income}}</div>
              <div class="key">盈亏(<span :class="item.income<0?'negative':'positive'">{{item.yieldRate}}%</span>)
              </div>
            </div>
          </div>
        </div>

        <div class="two">
          <a href="javascript:;" class="btn" @click.stop.prevent="toSell(item)">
            <div>模拟</div>
            <div>卖出</div>
          </a>
        </div>
      </div>
    </div>

    <div class="placeholder" v-if="stockList.length == 0">
      <div class="content">
        <div class="tips" v-if="error ==''">哎呦，我还没有<span class="">个股持仓</span>哦</div>
        <div class="guide" v-if="error ==''">点击下方的模拟买入买入我第一支个股</div>
        <div class="tips" v-if="error !=''">{{error}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import LocalDAO from 'common/localDAO'

  export default {
    data () {
      return {
        stockList: [],
        error:'',
        testData: 'testData'
      }
    },
    props: {
      userCode: {
        type: String
      }
    },
    created: function () {
      this.fetchData();
    },
    methods: {
      fetchData(){
        var self = this;
        RemoteDAO.callJCL11123(self.userCode, "0", "200", function (response) {
          if (Number(response.error) === 0) {
            var list = [];
            _.each(response.data.body.holders, function (item, index) {
              var object = {};
              object.stockName = item.stock_name;
              object.stockCode = item.stock_code;
              object.exchangeType = item.exchange_type;
              object.position = CommonUtil.toFixed(item.position, 2);
              object.costPrice = CommonUtil.toFixed(item.keep_cost_price, 2); // 成本价
              object.marketPrice = CommonUtil.toFixed(item.last_price, 2); // 市价
              object.quantity = CommonUtil.toFixed(item.current_vol, 0); // 持仓数量
              object.holdDays = item.hold_days; // 持仓周期
              object.income = CommonUtil.toFixed(item.income_balance, 2); // 盈亏金额
              if(object.income>0){
                object.income = "+" + object.income;
              }
              //盈亏率
              if (item.keep_cost_price > 0) {
                object.yieldRate = CommonUtil.toFixed((item.last_price - item.keep_cost_price) / item.keep_cost_price * 100, 2);
                if (object.yieldRate >= 0) {
                  object.yieldRate = "+" + object.yieldRate;
                }
              } else {
                object.yieldRate = "--";
              }
              list.push(object);
            });
            self.stockList = list;

          } else {
            self.error = response.data;
          }
        });
      },
      toStock(item){
        var stockCode = item.stockCode;
        var exchangeType = item.exchangeType;
        var market;
        if (exchangeType == "0") {
          market = "SZ";
        } else if (exchangeType == "1") {
          market = "SH";
        }
        RemoteDAO.callStockLive(market + stockCode, "ordinary", "1", function () {
        });
      },
      toSell(item){
        var stockCode = item.stockCode;
        var marketCd = item.exchangeType;
        var stockName = item.stockName;
        this.$router.push({
          path: '/trade/sellout',
          query: {
            menuId: '2',
            stockCode: stockCode,
            marketCd: marketCd,
            stockName : stockName
          }
        })
      }
    }
  }
</script>

<style scoped>
  .icon-gu{
    color:#3CBAEE;
    font-size: 13px;
  }
</style>
